<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span><strong>新闻通知</strong></span>
            </div>
        </template>
        <el-form inline>
            <el-form-item>
               <strong>当前学期:20232</strong>
                <el-button type="primary"@click="add()" style="margin-left: 900px">
                        添加新闻
                </el-button>
            </el-form-item>
        </el-form>
        <!-- 新闻列表 -->
        <el-table
                v-loading="loading"
                element-loading-text="Loading..."
                element-loading-svg-view-box="-10, -10, 50, 50"
                :data="fileData"
                style="width: 100%">
                <el-table-column type="index" width="300" label="序号"></el-table-column>
                <el-table-column label="标题" prop="title"  width="auto"></el-table-column>
                <el-table-column label="发布日期" prop="publishTime" width="auto" ></el-table-column>
                <el-table-column label="发布人" prop="author"></el-table-column>
                <el-table-column label="发布人单位"  width="auto" >体育部</el-table-column>
                <el-table-column label="相关附件" prop="fileName"show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-tooltip content="点击下载" effect="light">
                    <el-link type="primary" :href="row.fileUrl" target="_blank" :download="row.fileName"
                    :underline="false">
                        {{ row.fileUrl?row.fileName:"" }}
                    </el-link>
                        </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Delete" circle plain type="danger" @click=deleteByID(row)></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="未查找到数据" />
            </template>
        </el-table>
         <!-- 分页条 -->
         <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[6, 8 ,10]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
    <!-- 添加新闻弹窗 -->
<el-dialog v-model="dialogVisible" :title="myTitle" width="40%">
    <el-form :model="file" :rules="rules" label-width="150px" style="padding-right: 30px">
        <el-form-item label="新闻标题" prop="title">
            <el-input v-model="file.title" minlength="1"></el-input>
        </el-form-item>
        <el-form-item label="新闻主要内容" prop="text">
            <el-input v-model="file.text" minlength="1" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="相关附件" prop="press">
            <el-upload
        v-model:file-list="list"
        class="upload-demo"
        action="../api/upload"
        multiple
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :headers="{'Authorization':tokenStore.token}"
        :limit="1"
        :on-preview="look"
        accept=".pdf"
  >
    <el-button type="primary">选择文件</el-button>
    <template #tip>
      <div class="el-upload__tip">
        仅允许上传一个文件,仅限pdf格式
      </div>
    </template>
  </el-upload>
        </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addfile()"> 确认 </el-button>
            </span>
    </template>
</el-dialog>
</template>
<script setup>
import {
    Edit,Delete
}from '@element-plus/icons-vue'
//导入token状态
import { useTokenStore } from '@/stores/token.js'
import {ElMessage,ElMessageBox} from 'element-plus'
//调用useTokenStore得到状态
const tokenStore = useTokenStore();
const myTitle=ref('发布新闻')
const rules = {
    title:
        { required: true, message: '请输入标题', trigger: 'blur' },
    text: 
        { required: true, message: '请输入新闻主要内容', trigger: 'blur' }
}
//文件上传成功的回调函数
const list=ref()
const uploadSuccess = (result)=>{
    ElMessage.success("上传成功！")
    file.value.fileUrl=result.data
    file.value.fileName=list.value[0].name
}
const deleteByID=async(row)=>{
    ElMessageBox.confirm(
        '你确认删除新闻标题为：'+row.title+'的新闻信息吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    .then(async () => {
            //用户点击了确认
            const model={
                newID:row.newID
            }
            let result=await deleteByNewID(model)
            ElMessage.success(result.data?result.data:"删除成功！")
            //再次调用 getSportsPage()，获取所有项目
            getPage()
        })
        .catch(() => {
            //用户点击了取消
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
const uploadError=(result)=>{
    ElMessage.success("上传失败！")
}
const look=(result)=>{
    ElMessage.success("上传失败！")
}
const dialogVisible=ref(false)
const addfile=async()=>{
    let result=await addFile(file.value)
    ElMessage.success(result.data?result.data:"添加成功！")
    dialogVisible.value=false
    getPage()
}
const file=ref({
    title:"",
    text:"",
    fileUrl:"",
    fileName:"",
    yearTermID:"20232"
})
const add=()=>{
    dialogVisible.value=true;
}
import {ref,onMounted} from 'vue'
import {getPageService,addFile,deleteByNewID} from'@/api/public/newsFile.js'
//分页条数据模型
const currentPage = ref(1)//当前页
const total = ref(0)//总条数
const pageSize = ref(3)//每页条数
//分页表表数据模型
const fileData=ref()
//分页获取函数
const loading=ref(true)
const getPage= async ()=>{
    const model={
        currentPage:currentPage.value,
        pageSize:pageSize.value
    }
    let result=await getPageService(model)
    fileData.value=result.data.records
    total.value=result.data.total
    loading.value=false
}
//页面加载时函数
onMounted(
    ()=>{
        getPage()
    }
)
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getPage()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    currentPage.value = num
    getPage()
}
</script>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>